// cover some element-ui styles

.tips-ol {
  font-size: 12px;
  color: #ff6600;
  transform: scale(0.9);
  transform-origin: left center;
  li {
    line-height: 24px;
  }
}

.form-item__tips {
  font-size: 12px;
  color: #606266;
  margin-top: 7px;
  line-height: 1.42;
  &::before {
    content: '* ';
    color: #ff6600;
  }
}

.transform-smaller {
  transform: scale(0.9);
  transform-origin: left center;
}

.tips {
  &-warning {
    transform: scale(0.9);
    font-size: 12px;
    color: #ff6600;
    transform-origin: left center;
  }
}

.expand-column {
  .cell {
    display: none;
  }
}

.goods-grid {
  display: grid;
  gap: 10px 5%;
  grid-template-columns: repeat(auto-fill, 300px);
  .em-goods-card:not(:first-child) {
    margin: 0;
  }
}

.kvlist {
  margin-top: 10px;
  color: #999;
  dl {
    margin: 0;
    display: flex;
    align-items: center;
    dd {
      margin: 0;
    }
  }
}

.form-item--medium {
  .el-form-item__content > .el-input,
  .el-form-item__content > .el-textarea {
    width: 50%;
    max-width: 450px;
  }
}

.select-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .el-image {
    height: 30px;
    width: 50px;
  }
}

.fixed-box__content {
  .el-form-item {
    margin-bottom: 0;
    .el-form-item__content {
      &::after,
      &::before {
        display: none;
      }
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}

.em-cell {
  &__value {
    .el-breadcrumb {
      display: flex;
      justify-content: flex-end;
    }
  }
  &--clickable {
    .em-cell__value {
      .el-breadcrumb {
        &__item:last-child {
          * {
            cursor: pointer;
            color: inherit;
          }
        }
        &__inner {
          color: inherit;
        }
      }
    }
  }
}

.crud {
  &-header {
    margin-bottom: 10px;
    line-height: 40px;
  }

  &-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-checkbox {
      padding-left: 10px;
    }
  }

  &-pagination {
    text-align: right;
    margin-top: 10px;
  }

  .symbol {
    &-sm {
      .el-image {
        height: 4em;
      }
    }
  }

  .el-table {
    // border: 1px solid #e7ecf1;
    // border-bottom: none;
    &::before {
      display: none;
    }
    &__fixed::before,
    &__fixed-right::before {
      display: none;
    }
    &__header th {
      //   background-color: #f5f6fa;
      color: #333333;
      font-weight: 500;
      vertical-align: middle;
      background-color: #eff3f8;
    }
    .caret-wrapper {
      height: 1rem;
    }
    .sort-caret {
      &.ascending {
        top: -6px;
      }
      &.descending {
        bottom: -4px;
      }
    }
    th.is-leaf,
    td {
      border-bottom-color: #e7ecf1;
      .cell {
        .el-tag {
          margin-left: 2px;
        }
        .el-image {
          display: inline-flex;
          align-items: center;
          height: 4rem;
          .em-icon,
          [class^='el-icon-'],
          [class^='em-icon-'] {
            font-size: 3rem;
            color: #d7e9f5;
          }
        }
        .el-avatar {
          display: inline-flex;
          align-items: center;
        }
      }
      &.is-left,
      &.text-left {
        .cell {
          .el-tag {
            margin: 2px 5px 2px 0;
          }
        }
      }
      &.is-right,
      &.text-right {
        .cell {
          .el-tag {
            margin: 2px 0 2px 5px;
          }
        }
      }
    }

    &.el-table--mini {
      th.is-leaf {
        .caret-wrapper {
          justify-items: center;
          justify-content: space-between;
          height: 100%;
        }
        .cell {
          height: 24px;
          line-height: 24px;
        }
        .sort-caret {
          position: initial;
        }
      }
    }

    .action-column {
      .cell {
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
      &.is-left,
      &.text-left {
        .cell {
          justify-content: flex-start;
        }
      }

      &.is-center,
      &.text-center {
        .cell {
          justify-content: center;
        }
      }
    }

    .el-breadcrumb {
      font-size: 12px;
      &__inner {
        width: 50px;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      &__separator {
        margin: 0 5px;
      }
    }

    .split-inline {
      display: flex;
      flex-direction: column;
      > * {
        display: inline-block;
      }
      //   > * + * {
      //     &::before {
      //       content: '/';
      //       width: 8px;
      //       display: inline-block;
      //       font-size: 12px;
      //       opacity: 0.6;
      //     }
      //   }
    }

    tr[class*='el-table__row--level'] {
      > td:first-child {
        .cell {
          display: flex;
        }
      }
      .el-table__expand-icon {
        display: inline-flex;
        align-items: center;
        .el-icon-arrow-right:before {
          content: '\e723';
        }
        &--expanded {
          transform: rotate(0);
          .el-icon-arrow-right:before {
            content: '\e722';
          }
        }
        & + * {
          display: inline-flex;
          align-items: center;
        }
      }
    }

    &__append-wrapper {
      .crud-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .el-checkbox {
          padding-left: 10px;
          margin-right: 10px;
          &__label {
            font-size: 12px;
          }
        }
        &__content {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }
}
